<template>
  <div v-if="currentQuestion">
    <h4>
      #{{ currentPage + 1 }}- {{ currentQuestion.title }}
      <i @click="lookAnswersTs" class="el-icon-question"></i>
    </h4>
    <el-checkbox-group v-model="checkboxList">
      <el-checkbox
        :label="item.index ? item.index : item.text"
        v-for="(item, index) in JSON.parse(currentQuestion.options)"
        :key="index"
      >
        {{ item.index ? item.index : item.text }} -
        {{ item.value }}</el-checkbox
      >
    </el-checkbox-group>
    <el-button-group>
      <el-button
        type="success"
        size="small"
        icon="el-icon-arrow-left"
        :disabled="currentPage <= 0"
        @click="onChangeQuestion('up')"
        >上一题</el-button
      >
      <el-button
        type="success"
        size="small"
        :disabled="currentPage >= total - 1"
        @click="onChangeQuestion('down')"
        >下一题<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </el-button-group>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      checkboxList: [],
    };
  },
  methods: {
    ...mapMutations("test/study", ["DOWN_QUESTION", "UP_QUESTION"]),
    ...mapActions("test/study", ["getQuestionsList", "currentState"]),
    lookAnswersTs() {
      alert(this.currentQuestion.tips);
    },
    async onChangeQuestion(val) {
      await this.currentState({ val, list: this.checkboxList });
      this.checkboxList = this.answerSheet[this.currentPage]
        ? this.answerSheet[this.currentPage].answers
        : [];
    },
  },
  mounted() {
    this.getQuestionsList();
  },
  computed: {
    ...mapState("test/study", ["currentPage", "total", "answerSheet"]),
    ...mapGetters("test/study", ["currentQuestion"]),
  },
  watch: {
    currentPage() {
      this.checkboxList = this.answerSheet[this.currentPage]
        ? this.answerSheet[this.currentPage].answers
        : [];
    },
  },
};
</script>

<style scoped>
.el-checkbox-group .el-checkbox {
  display: block;
  margin-top: 15px;
}

.el-button-group {
  margin-top: 20px;
}

h4 i:hover {
  cursor: pointer;
}
</style>